import React, { createRef, useEffect, useRef, useState } from 'react';
import styles from './index.module.scss';
import { useLocation, useNavigate } from 'ice';

import { observer, inject } from "mobx-react";
import { Link } from 'react-router-dom';
import CardStage from '../CardStage';
import { Card, Input, Overlay } from '@alifd/next';
import { runInAction } from 'mobx';
import CardInput from './CardInput';
const { Popup } = Overlay;

function getDateDay(dateStr) {
    let date = new Date(dateStr);
    return `${date.getMonth() + 1}/${date.getDate()}`
}
const popupProps = {
    animation: {
        in: 'zoomIn',
        out: 'zoomOut',
    },
    triggerType: 'hover',
    placementOffset: 4,
};
function CardDetail(props: {
    parentCardId?: string
    cardModel: any
    cardId: string
    colIndex: number
    isFirst: boolean
}) {
    var cardModel = props.cardModel;
    const [currentCardData, setCurrentCardData] = useState<any>(null);
    const [childLen, setChildLen] = useState(0);
    const location = useLocation();
    const navigate = useNavigate();
    const pathname = location.pathname;

    useEffect(() => {
        cardModel.getCardData(props.cardId).then(data => {
            setCurrentCardData(data);
            var childLen = data.cols.reduce((total, item) => {
                return total + Object.keys(item.cards).length;
            }, 0);
            setChildLen(childLen);
        })
    }, []);
    if (currentCardData) {
        if (childLen > 0) {
            return <Card className={styles.cardWrap} hasBorder={true} free style={{
                width: '100%'
            }} title={
                props.isFirst ? <CardInput
                    parentCardId={props.cardModel.currentCardId}
                    colIndex={props.colIndex}
                    cardId={props.cardId}
                /> : <div title={currentCardData.title} onClick={() => {
                    navigate(`/target_detail/${props.cardModel.projectId}/${props.cardModel.currentCard.id}/${props.cardId}`);
                }}>
                    {currentCardData.title}
                </div>}>

                <div style={{
                    display: 'flex',
                    width: '100%',
                    boxSizing: 'border-box',
                    padding: '5px 0'
                }}>
                    {currentCardData.cols.map((item, index) => {
                        return <div style={{
                            display: 'flex',
                            flexDirection: 'column',
                            flex: '1',
                            padding: '0 10px',
                        }}>
                            {
                                item.cards.map(item2 => {
                                    return <CardDetailWrap cardId={item2.id} parentCardId={props.parentCardId ? `${props.parentCardId}/${currentCardData.id}` : `${currentCardData.id}`} colIndex={index}></CardDetailWrap>
                                })
                            }
                        </div>
                    })}
                </div>
            </Card>
        } else {
            return <div style={{
                padding: '5px 0'
            }}>
                <div className={styles.tagWrap} onClick={() => {
                    navigate(`/target_detail/${props.cardModel.projectId}/root/${props.parentCardId}/${props.cardId}`);
                }}>
                    <span >{currentCardData.title}</span>
                    {currentCardData.date && <div >{getDateDay(currentCardData.date[0])}-{getDateDay(currentCardData.date[1])}</div>}
                </div>
            </div>
        }
    } else {
        return null;
    }
}

const CardDetailWrap = inject('cardModel')(observer(CardDetail))
export default CardDetailWrap;
